<template>
	<view class="app">
		<view class="panel">
			<view class="query">	
				<view class="date" @click="showSelectCity">选择城市</view>
				<view class="btn" @click.stop="loadlist">查看</view>
			</view>
		</view>
		<niceui-popup-select ref="showCity" :columns="cityList" :selectValue="cityId" :is-search="false" :option="{label:'desc', value:'site_id'}" @confirm="confirmCity"></niceui-popup-select>
		
		<view style="padding-bottom: 60px;">
			<view class="panel" v-for="(item,index) in list.data">
				<view class="flex justify-between items-center head" @click="toCopy(item.order_sn)">
					<view>{{item.order_sn}}</view>
					<view>{{item.name}}</view>
				</view>
				
				<view class="flex justify-between items-center">
					<view>
						<view class="ptime">开始时间:<text>{{item.clock_in_time*1000|formatDate}}</text></view>
						<view class="imgitem">
							<image class="img" v-for="(img,i) in toJSON(item.start_images)" :src="img" mode="heightFix" @click="viewPic(img)"></image>
						</view>
						<view class="ptime">结束时间:<text>{{item.complete_time*1000|formatDate}}</text></view>
						<view class="imgitem">
							<image class="img" v-for="(img,i) in toJSON(item.end_images)" :src="img" mode="heightFix" @click="viewPic(img)"></image>
						</view>
					</view>
					<view>
						<view>应服务:{{item.duration}}分钟</view>
						<view>实服务:{{((item.complete_time-item.clock_in_time)/60).toFixed(0)}}分钟</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="page playctr">
			<view class="page-item">
				<wyb-pagination :total-items="list.total" :page-items="list.per_page" :current="list.current_page" :show-total-item="true" :show-icon="true" @change="loadlist"/>
			</view>
		</view>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				cityList:[],
				cityId:[],
				list:{}
			}
		},
		onLoad() {
			that=this;
			let city=[];
			this.comm.http('/api/tool/loadcity').then(res=>{
				for (let item of res.data) {
					city.push({
						site_id:String(item.site_id),
						desc:item.desc
					});
					that.cityId.push(String(item.site_id));
				}
				that.cityList=city;
				this.loadlist();
				
			});
		},
		methods: {
			//打开选择器
			showSelectCity(){
				this.$refs.showCity.showPopup()
			},
			toCopy(e){
				Comm.copy(e);
			},
			confirmCity(value,data) {
				that.cityId=value;
				this.$refs.showCity.closePopup()
			},
			loadlist(page={current:1}){
				this.tab=1;
				let _page=page.current;
				let citylist=[];
				for (let item of this.cityId) {
					citylist.push(item);
				}
				Comm.http('/api/tool/ordersign',{page:_page,city:citylist},'POST').then(res=>{
					if(res.code==1)
						that.list=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			toJSON(s){
				if(s!=''){
					return JSON.parse(s);
				}
				return '';
			},
			viewPic(url){
				uni.previewImage({
					urls:[url]
				})
			}
		}
	}
</script>
<style lang="scss">
	.query{
		display: flex;  justify-content: center;
		.date{padding:4px 0; border-bottom: 1px solid #999999; margin-right: 16px;}
		.btn{
			padding: 4px 3vw; text-align: center; border: 1px solid #666; border-radius: 5px;
		}
	}
	.head{
		padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f0f0f0;
	}
	.list{
		margin-bottom: 8px;
		padding: 8px 0;
		border-bottom: 1px solid #999;
	}
	.imgitem{
		display: flex; padding:4px 0;
	}
	.img{
		height: 100px; margin-right: 8px;
	}
	.playctr{
		position: fixed; left: 0; bottom: 0; width: 100vw; border-top:#e6e6e6 1px solid; background-color: #fff;  padding: 8px 0;
	}
	.playctr-item{
		margin: 8px 8px;
	}
	.ptime{
		font-size: 12px;
	}
	.ptime text{
		color: #999;
	}
</style>
